﻿@page "/page2"

<h3>Page2</h3>

@*<div>动态组件生成与数据绑定</div>
    <ul>
        <li>RenderFragment 介绍</li>
        <li>RenderTreeBuilder 中的 Sequence 讲解</li>
    </ul>*@

<div>Name: @Model.Name</div>

@RenderFoo

<Button Text="Render Foo" OnClick="@Render" />

@code {
    private class Foo
    {
        public string Name { get; set; }
    }

    private Foo Model { get; set; }

    private RenderFragment RenderFoo { get; set; }

    /// <summary>
    ///
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Model = new Foo() { Name = "张三" };
    }

    private Task Render()
    {
        RenderFoo = builder =>
        {
            // 以代码的形式进行数据双向绑定，需要 FooBind 内部支持
            builder.OpenComponent<FooBind>(0);
            builder.AddAttribute(1, nameof(FooBind.Field), Model.Name);
            builder.AddAttribute(2, nameof(FooBind.FieldChanged), EventCallback.Factory.Create<string>(this, name =>
            {
                Model.Name = name;
            }));
            builder.CloseComponent();
        };
        return Task.CompletedTask;
    }
}
